<template>
	<div class="smp-result smp_panel_1">
		<div class="smp_panel_header">
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">服务接口列表</div>
			
			<div class="smp-panel_option" style="text-align: right;float:right;margin-top:-45px">
				<el-button @click="exportBusInterfaceList"  size="mini">
					<i class="el-icon-download"></i>
				导出
				</el-button>
			</div>
			
		</div>
		<div class="smp_panel_body">
			<el-table :data="busInterfaceList" size="mini" stripe style="width: 100%">

				<el-table-column prop="transCode" label="交易码" align="center">
				</el-table-column>
				<el-table-column prop="transName" label="交易名称" align="center">
				</el-table-column>
				
				<el-table-column prop="busCode" label="服务编码(R值)" align="center">
				</el-table-column>

				<el-table-column prop="systemNum" label="消费系统数" align="center" width="100">
				</el-table-column>

				<el-table-column prop="status" label="服务状态" align="center">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0002")}}
					</template>
				</el-table-column>

				<el-table-column prop="createTime" label="创建时间" align="center">
				</el-table-column>

				<el-table-column label="操作" align="center" width="150">
					<!-- <template slot="header">
				  <i class="el-icon-upload"></i>
				  导出
			  </template> -->
					<template slot-scope="scope">
						<!-- <i class="el-icon-edit-outline"/>
				<!-- <el-link 
			         size="mini
					 type="primary"
					 :underline="false"
					 style="font-size: 12px;"
			         @click="handleEdit(scope.$index, scope.row)">配置</el-link>/ -->
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="serviceDetail(scope.$index, scope.row)">服务详情</el-link>
					</template>
				</el-table-column>

			</el-table>

			<div class="smp-pagination">
				<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
					@current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	"use strict";
	import {
		getBusInterfaceListByPage,exportInterfaceList
	} from '@/api/service.js';
	export default {

		data() {
			return {
				total: 0,
				busInterfaceList: [],
				busCode:'',
				query: {
					body: {
						systemNo: ''
					},
					pageNum: 1,
					pageSize: 5
				},
			};
		},

		props: {
			row: {
				type: Object,
			}
		},

		created() {
			this.query.body.systemNo = this.row.systemNo;
			this.query.pageNum = 1;
			this.getList();

		},


		methods: {

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},

			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},

			serviceDetail(index, row) {
				this.$router.push({
					name: 'serviceDetails',
					query: {
						"busCode": row.busCode,
						"systemNo": this.query.body.systemNo,
						"transCode": row.transCode
						
					}
				})
			},

			getList() {
				getBusInterfaceListByPage(this.query).then(response => {
					this.busInterfaceList = response.data.extend.list;
					this.total = response.data.extend.total;
					this.$emit("busInterTotal", this.total);
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			exportBusInterfaceList() {
				const loading = this.$loading({
					lock: true,
					text: '数据处理中，请耐心等待',
					spinner: 'el-icon-loading'
				})
				exportInterfaceList({"regSysCode":this.query.body.systemNo}).then(res => {
					loading.close();
					let name = "服务接口列表.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: "服务接口列表.xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);
									
					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},

		}
	}
</script>

<style>
</style>
